<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/xadmin.css">
  <link rel="stylesheet" href="./lib/layui/css/layui.css">


  <script src="./lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="./js/xadmin.js"></script>



  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    body {
      padding: 15px;
      background-color: #fff;
    }

    /* .layui-form-item {
      width: 400px;
    } */

    .layui-input-block {
      min-height: 0 !important;
    }

    .layui-form-label {
      line-height: 30px !important;
      padding: 0 !important;

    }




    .article {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      z-index: 999;
      width: 685px;
      height: 400px;
      display: none;
    }

    .article1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      z-index: 999;
      width: 685px;
      height: 400px;
      display: none;
    }

    .shade {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 120%;
      background-color: rgba(0, 0, 0, .3);
    }

    .shade1 {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 120%;
      background-color: rgba(0, 0, 0, .3);
    }

    .article_title {
      height: 50px;
      line-height: 50px;
      margin-left: 20px;
      border-bottom: 1px solid #000;
    }

    #form_add1 {
      margin-top: 30px;
      padding-left: 130px;
    }

    #form_add {
      margin-top: 30px;
      padding-left: 130px;
    }

    h2 {
      float: left;
    }

    .iconclose {
      float: right;
      margin-right: 5px;
    }
  </style>






  <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
  <div class="x-nav">
    <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a href="">演示</a>
      <a>
        <cite>导航元素</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
      onclick="location.reload()" title="刷新">
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
  </div>




  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">

      <form class="layui-form form-header" id="form-search" lay-filter="query">

        <div class="layui-form-item layui-inline">
          <label class="layui-form-label">广告图描述</label>
          <div class="layui-input-inline">
            <input type="text" name="title" placeholder="请选择广告位名称" autocomplete="off" class="layui-input">
          </div>
        </div>


        <div class="layui-form-item layui-inline">
          <label class="layui-form-label">广告图位置</label>
          <div class="layui-input-block">
            <select name="hhaa" class="selects" lay-verify="required">

            </select>
          </div>
        </div>

        <div class="layui-form-item layui-inline">
          <button lay-submit class="layui-btn form-enen">筛选</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>



      </form>

      <!-- 新增跟导出 -->
      <button type="button" id="addedbtn" class="layui-btn layui-btn-normal layui-btn-lg"><i
          class="layui-icon layui-icon-add-circle-fine circlefine"></i>新增</button>
      <button type="button" class="layui-btn layui-btn-warm layui-btn-lg"><i
          class="layui-icon layui-icon-upload"></i>导出</button>



      <!-- 列表区域 -->
      <table class="layui-table">
        <colgroup>
          <col width="30" />
          <col width="50" />
          <col width="450" />
          <col width="450" />
          <col width="450" />
          <col width="450" />
          <col width="450" />
        </colgroup>
        <thead>
          <tr>
            <th>
              <input type="checkbox">
            </th>
            <th>#</th>
            <th>广告图位</th>
            <th>广告图描述</th>
            <th>广告图</th>
            <th>广告链接</th>
            <th>操作</th>

          </tr>
        </thead>
        <tbody></tbody>
      </table>

      <!-- 分页区域 -->
      <div id="pageBox"></div>

    </div>
  </div>

  <!-- 定义广告数据的模板引擎 -->
  <script type="text/html" id="tpl-table">
    {{each data}}
    <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>{{$index+1}}</td>
        <td>{{$value.advposname}}</td>
        <td id="desc">{{$value.advimgdesc}}</td>
        <td>
          <img src="{{'http://192.168.21.69:8060/'+$value.advimgsrc}}" alt="">
        </td>
        <td>{{$value.advimglink}}</td>
       

        <td>
            <button type="button" class="layui-btn  layui-btn-xs btn-edit" data-id="{{$value.id}}" >编辑</button>
            <button type="button" class="layui-btn layui-btn-danger  layui-btn-xs btn-delete" data-id="{{$value.id}}">删除</button>
        </td>
    </tr>
    {{/each}}
</script>









  <!-- 模板渲染新增文章 -->
  <div class="article">
    <div class="article_title">
      <h2>添加广告图</h2>
      <i class="layui-icon layui-icon-close iconclose" style="font-size: 20px; color: #000;"></i>
    </div>
    <form class="layui-form" action="" id="form_add">
      <!-- 第一个下拉选择框 -->
      <div class="layui-form-item layui-inline">
        <label class="layui-form-label">广告图位置</label>
        <div class="layui-input-block">
          <select name="advimgpos" class="selects" lay-verify="required">
          </select>
        </div>
      </div>
      </select>

      <!-- 隐藏id -->
      <!-- <input type="hidden" name="advimgpos"> -->
      <!-- 第二个文本域 -->
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block">
          <textarea name="advimgdesc" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
      </div>
      <!-- 第三个输入框 -->
      <div class="layui-form-item layui-inline">
        <label class="layui-form-label">广告图描述</label>
        <div class="layui-input-block">
          <input type="text" name="advimglink" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
            class="layui-input">
        </div>
      </div>

      <!-- 提交图片 -->
      <div class="layui-form-item">
        <label class="layui-form-label">广告图</label>
        <input type="file" style="display: none;" id="file" name="advimgsrc">
        <div class="layui-input-block">
          <div class="layui-btn layui-btn-normal btntijiao">上传图片</div>
        </div>
      </div>
      <button class="layui-btn layui-btn-normal formdemos" lay-submit lay-filter="formDemo"
        style="margin-right: 20px;">添加</button>

    </form>
  </div>

  <div class="shade" style="display: none;"></div>





  <!-- 模板渲染编辑文章 -->
  <div class="article1">
    <div class="article_title">
      <h2>修改广告图</h2>
      <i class="layui-icon layui-icon-close iconclose" style="font-size: 20px; color: #000;"></i>
    </div>
    <form class="layui-form" action="" id="form_add1">
      <!-- 第一个下拉选择框 -->
      <div class="layui-form-item layui-inline">
        <label class="layui-form-label">广告图位置</label>
        <div class="layui-input-block">
          <select name="advimgpos" class="selects" lay-verify="required">
          </select>
        </div>
      </div>
      </select>

      <!-- 隐藏id -->
      <!-- <input type="hidden" name="advimgpos"> -->
      <!-- 第二个文本域 -->
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">广告图描述</label>
        <div class="layui-input-block">
          <textarea name="advimgdesc" placeholder="请输入内容" class="layui-textarea" id="ta"></textarea>
        </div>
        <div id="ta" style="height: 30px; width: 40px; "></div>
      </div>
      <!-- 第三个输入框 -->
      <div class="layui-form-item layui-inline">
        <label class="layui-form-label">广告图链接</label>
        <div class="layui-input-block">
          <input type="text" name="advimglink" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
            class="layui-input">
        </div>
      </div>

      <!-- 提交图片 -->
      <div class="layui-form-item">
        <label class="layui-form-label">广告图</label>
        <input type="file" style="display: none;" id="file1" name="advimgsrc">
        <div class="layui-input-block">
          <div class="layui-btn layui-btn-normal btntijiao1">上传图片</div>
        </div>
      </div>
      <button class="layui-btn layui-btn-normal formdemos" lay-submit lay-filter="formDemo"
        style="margin-right: 20px;">添加</button>

    </form>
  </div>

  <div class="shade1" style="display: none;"></div>






  <!-- 分类可选项的模板引擎 -->
  <script type="text/html" id="tpl-cate">
  <option value="">请选择广告位</option>
  {{each data}} 
  <option value="{{$value.id}}">{{$value.advposname}}</option>
  {{/each}}
</script>






  <script src="./lib/layui/layui.all.js"></script>

  <script src="./lib/template-web.js"></script>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/baseAPI.js"></script>
  <script src="./js/advimg.js"></script>

</body>



<script>
</script>

</html>